<template>
  <div class="talents-header">
    <div class="talents-info">
      <div class="talents-title" @click="goHome">厦门产业数字化转型人才培养基地</div>
      <div class="talents-tab">
        <div class="tab-item" v-for="(item,index) in tabList" :key="index">
          <a :href="item.url" target="_blank">{{item.name}}</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      tabList: [ // 头部tab
        {
          name: '数据大屏',
          url: 'https://campus.goktech.cn/screenHome'
        },
        {
          name: '教学平台',
          url: 'https://edu.gxj.xm.gov.cn/auth-login?r=Lw'
        }
      ]
    }
  },
  mounted () {
  },
  methods: {
    // 返回首页
    goHome () {
      this.$router.push({
        path: '/talents/teaching'
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
.talents-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height:68px;
  background: #fff;
  z-index: 999;
  border-bottom: 1px solid rgba(255, 255, 255, 0.26);
  .talents-info {
    width: 1200px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .talents-title {
      font-size: 22px;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: #4675FD;
      cursor:pointer
    }
    .talents-tab {
      display:inline-block;
      line-height: 32px
      .tab-item {
        float: left;
        margin-right: 60px
        &:last-child {
          margin-right: 0;
        }
        a {
          text-decoration: none;
          font-size: 18px;
          font-family: SourceHanSansCN-Regular, SourceHanSansCN;
          font-weight: 400;
          color: #101010
          &:hover {
            color: #4676FE !important;
            border-bottom: 1px solid #4676FE;
          }
        }
      }
    }
  }
}
</style>